<template>
  <!-- 创建时间：2023/5/10 -->
  <!-- 作者：admin -->
  <!-- CustomInput组件说明：输入框-->
    <el-autocomplete
            v-model="keyWords"
            popper-class="my-autocomplete"
            prefix-icon="el-icon-search"
            :fetch-suggestions="querySearchAsync"
            :trigger-on-focus="false"
            placeholder="搜索"
    >
        <template slot-scope="{ item }">
            <div class="links">
                <div class="name">{{ item.name }}</div>
                <div class="type">{{ item.customTypeName }} <span v-if="item.artistName">- {{
                    item.artistName.name
                    }}</span>
                </div>
            </div>
        </template>
    </el-autocomplete>
</template>

<script>
import {getSuggest} from "@/http";
import {ALBUMLIST, RECSONGLIST, SINGERLIST, SONGS} from "@/http/constant";

export default {
    name: "SearchInput",
    data() {
        return {
            keyWords: ''
        }
    },
    methods: {
        querySearchAsync(queryString, callback) {
            getSuggest(queryString).then(res => {
                const searchSuggest = []
                if (res.hasOwnProperty('result')) {
                    const {result} = res
                    const {order} = result
                    order.forEach(item => {
                        const list = result[item]
                        // 搜索类型
                        let customType = ''
                        let customTypeName = ''
                        switch (item) {
                            case 'songs':
                                customType = SONGS
                                customTypeName = '歌曲'
                                break
                            case 'artists':
                                customType = SINGERLIST
                                customTypeName = '歌手'
                                break
                            case 'albums':
                                customType = ALBUMLIST
                                customTypeName = '专辑'
                                break
                            case 'playlists':
                                customType = RECSONGLIST
                                customTypeName = '歌单'
                                break
                        }
                        const formatList = list.map(listItem => {
                            // name:歌曲名字/歌手名字/专辑名字/歌单名字
                            const {id, name} = listItem
                            let artistName = null
                            if (listItem.hasOwnProperty('artist') && listItem.artist) {
                                artistName = {
                                    id: listItem.artist.id,
                                    name: listItem.artist.name
                                }
                            } else if (listItem.hasOwnProperty('artists') && listItem.artists.length) {
                                artistName = {
                                    id: listItem.artists[0].id,
                                    name: listItem.artists[0].name
                                }
                            }
                            return {
                                id,
                                name,
                                customType,
                                customTypeName,
                                artistName
                            }
                        })
                        searchSuggest.push(...formatList)
                    })
                }
                callback(searchSuggest)
            })
        },
    }
}
</script>

<style scoped lang="less">
@import "@/assets/less/common";

.my-autocomplete {
  li {
    .links {
      padding: .3vw 0;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 15px;
        font-weight: 700;
      }

      .type {
        font-size: 12px;
        color: @metaphorFont;
        line-height: 15px;
        margin-top: .2vw;
      }
    }
  }
}
</style>